<template>
  <div class="box-pop">
    <div class="center-pop" v-if="type == 'center'" :style="{ height, width }">
      <div class="header">提示</div>
      <div class="content">
        {{ content }}
      </div>
      <div class="box-btn">
        <div class="center-confirm btn" @click="comfirm">
          {{ btnText }}<span v-if="isCountDown">({{ time }})</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/**
 * 注明：这里适合 element的弹窗不合适的时候使用
 *
 * type : 弹窗类型
 *    'center': 居中弹窗
 *
 * content: 弹窗内容， 暂定为所有的都用这个
 * seconds: 用于倒计时
 * isCountDown: 是否起用倒计时
 * btnText: 一般就是弹窗最下方的按钮文案
 */
export default {
  data() {
    return {
      timer: '',
      time: this.seconds
    }
  },
  props: {
    type: {
      default: 'center'
    },
    content: {
      default: '内容'
    },
    seconds: {
      default: 0
    },
    isCountDown: {
      default: false
    },
    width: {
      default: '38.75rem'
    },
    height: {
      default: '12.5rem'
    },
    btnText: {
      default: '确认'
    }
  },
  methods: {
    comfirm() {
      this.$emit('onConfirm')
    }
  },

  mounted() {
    if (this.isCountDown) {
      this.timer = setInterval(() => {
        if (this.time === 0) {
          clearInterval(this.timer)
          this.comfirm()
        } else {
          this.time -= 1
        }
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/global-style.scss';
@import '@/assets/css/global-var.scss';
.box-pop {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10;
}

.center-pop {
  @include position-center;
  border-radius: 10px;
  background: #fff;
  width: 38.75rem;
  height: 12.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.625rem;

  .header {
    height: 2.25rem;
  }

  .box-btn {
    display: flex;
    justify-content: flex-end;
  }

  .btn {
    @include display-center;
    height: 1.5625rem;
    width: 5rem;
    background-color: $btn_blue;
    color: #fff;
    cursor: pointer;
  }
}

.content {
  text-align: center;
  white-space: pre-line;
}
</style>
